<template>
  <el-scrollbar style="height: 100%">
    <div style="height: 100vh">
      <!-- 整体容器 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <el-row class="nav">
            <el-col :span="4">&nbsp;</el-col>
            <!-- 城市定位 -->
            <el-col :span="4">
              <!-- 定位图标 -->
              <i class="el-icon-location"></i>
              <!-- 城市选择下拉框 -->
              <el-dropdown @command="handleCommand">
                <!-- 选中的城市名 -->
                <span class="el-dropdown-link">
                  {{ this.city }}
                </span>
                <!-- 所有的城市 -->
                <el-dropdown-menu
                  slot="dropdown"
                  style="width: 430px; margin-left: 250px"
                >
                  <el-dropdown-item
                    v-for="(item, index) in cities"
                    :key="index"
                    :command="item.label"
                    class="cityChoose"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
            <el-col :span="4">&nbsp;</el-col>
            <el-col :span="4">&nbsp;</el-col>
            <el-col :span="8">
              <el-row :gutter="20">
                <!-- 未登录，请先登录！ -->
                <el-col :span="12" v-if="!userToken">
                  <el-button
                    type="text"
                    style="color: rgb(136, 137, 138)"
                    @click="login"
                    >未登录，请先登录！免费注册</el-button
                  ></el-col
                >
                <!-- 用户信息 -->
                <el-col :span="6" v-else>
                  <el-button type="text" style="color: rgb(136, 137, 138)">
                    <span>{{ username }}</span>
                    <!-- 登录者下拉选项 -->
                    <el-dropdown>
                      <i class="el-icon-arrow-down el-icon--right"></i>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="myInfo"
                          >个人中心</el-dropdown-item
                        >
                        <el-dropdown-item divided @click.native="logout"
                          >退出登录</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-button>
                </el-col>
                <!-- 我的订单 -->
                <el-col :span="6">
                  <el-button
                    type="text"
                    style="color: rgb(136, 137, 138)"
                    @click="myOrder"
                    >我的订单</el-button
                  >
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="0">&nbsp;</el-col>
          </el-row>
        </el-header>
        <!-- 内容主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 底部 -->
        <el-footer>
          <div class="footer">
            <!-- ICP备案号 -->
            <a
              style="text-decoration: none"
              target="_blank"
              href="https://beian.miit.gov.cn/"
              >{{ webInfo.icpNumber }}</a
            >
            <!-- 公安备案 -->
            <img
              src="https://hyr6.work/style/images/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
              alt=""
            />
            <a
              style="text-decoration: none"
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351229"
              >{{ webInfo.policeNumber }}</a
            >
          </div>
        </el-footer>
      </el-container>
    </div>
  </el-scrollbar>
</template>
<script>
// 所有城市
import citydata from '../assets/js/citydata'
export default {
  data () {
    return {
      city: "城市",
      cities: citydata,
      // 登录者用户名
      username: '',
      // 登录者token
      userToken: '',
      // 网站信息
      webInfo: []
    }
  },
  // 路由
  resolve (arr, parentPath = "") {
    let newArr = [];
    arr.foreach((route) => {
      let obj = Object.assign({}, route);

      parentPath =
        parentPath && parentPath.lastIndexOf("/") !== parentPath.length - 1
          ? parentPath + "/"
          : parentPath

      obj.path = parentPath + obj.path;
      if (obj.children && obj.children.length > 0) {
        obj.children = this.resolve(obj.children, obj.path);
      }
      if (obj.meta && obj.meta.hidden) {
        if (obj.children && obj.children.length > 0) {
          obj.children.forEach((item) => {
            let tmp = Object.assign({}, item);
            newArr.push(tmp)
          })
        }
      } else {
        newArr.push(obj)
      }
    })
    return newArr
  },
  // 钩子
  created () {
    // 获取登录者的用户名
    this.username = window.localStorage.getItem('username')
    // 获取登录者的token
    this.userToken = window.localStorage.getItem('token')
    // 获取网站信息
    this.getWebInfo()
  },
  methods: {
    // 获取网站信息
    async getWebInfo () {
      const { data: res } = await this.$http.get('WebsiteInfo')
      if (res.meta.status !== 200) {
        // 网站信息获取失败
        this.$message.error('网站信息获取失败！')
      } else {
        // 网站信息获取成功
        // 将获取到的数据赋值给webInfo数组
        this.webInfo = res.data.websiteInfo[0]
      }
    },
    // 下拉框选中项赋值
    handleCommand (res) {
      this.city = res
    },
    // 登录
    login () {
      this.$router.push('/login')
    },
    // 我的订单
    myOrder () {
      // 未登录
      if (!this.userToken) {
        this.$router.push('/login')
        this.$message.info('请先登录！')
      } else {
        this.$router.push('/myOrder')
      }
    },
    // 个人中心
    myInfo () {
      this.$router.push('/myInfo')
    },
    // 退出登录
    logout () {
      // 清空sessionStorage
      window.sessionStorage.clear()
      window.localStorage.clear()
      // 编程式导航跳转到登录页
      this.$router.push('/login')
    }
  }
}
</script>
<style scoped>
/* 城市选择样式 */
.cityChoose {
  font-size: 12px;
  width: 40px;
  float: left;
}
/* 商品分类层级 */
.hc_lnav {
  z-index: 10;
}

/* 城市、注册、登录、订单 */
.nav {
  display: flex;
  align-items: center;
  height: 32px;
}

/* 头部 */
.el-header {
  background-color: #f9f9f9;
  height: 32px !important;
}

/* 底部 */
.el-footer {
  height: 40px !important;
}
.footer {
  display: flex;
  justify-content: center;
}
</style>

<style>
/* 滚动条 */
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
